<template>
  <div class="home">
     <div class="homedata">
      <Hcard v-for="(item,index) in carddata" :data="item" :key="index">
      <i slot="icon" class="iconfont " :class="item.icon"></i>
    </Hcard>
    </div>
    <div id="homeChart" style="height:400px"></div>
  </div>
</template>

<script>

import * as echarts from 'echarts';

import  Hcard  from "./Hcard.vue";
import {gethomchartsdata} from "@/api/order"
export default {
name:'Home',
components:{
  Hcard,
},
data(){
  return{cardData:{
title:'总订单',
number:20
  },
  carddata:[]} 
},
methods:{
    async getdatata(){ // 获取首页报表数据
   let res = await gethomchartsdata()

  //  解构数据
  let {totalOrder,totalAmount,todayOrder,totayAmount,xData,orderData,amountData}=res.data
   console.log(res.data);
   this.carddata.push({title:'总订单',number:totalOrder,icon:"icon-order"})
   this.carddata.push({title:'总销售额',number:totalAmount,icon:"icon-shop"})
   this.carddata.push({title:'今日订单',number:todayOrder,icon:"icon-item"})
   this.carddata.push({title:'今日销售额',number:totayAmount,icon:"icon-total"})
  console.log(this.carddata);
  
  // 操作dom  可以在这个时候操作
   this.drawLine(xData,orderData,amountData);
  //  监听window的窗口大小改变
  window.addEventListener('resize',this.resize)
},
  // 绘制折线图
  drawLine(xData,orderData,amountData){
    this.lineCharts = echarts.init(document.querySelector("#homeChart"));
    const option={
      // 配置项  查询文档

  title: {
    text: '数据统计',
    textStyle:{
      color:"#333",
      fontSize:12,
 
    },
     left:10,
  top:10,
  },
  // 提示框
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type:'cross',

    }
  },
  // 图例
  legend: {
    data: ['订单', '销售额'],
    top:15
  },
  // 整个直角坐标系
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // 工具栏
  toolbox: {
    // 工具配置项
    feature: {
      saveAsImage: {},
      
restore: {},

dataView: {},
magicType: { type:["line" ,"bar" , "stack" ] } 
    }
  },
  // x轴
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xData,  
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '订单',
      type: 'line',
     
      data:orderData,
    },
    {
      name: '销售额',
      type: 'line',
    
      data: amountData,
    },
  

  ]

    };
    this.lineCharts.setOption(option);
   
  },
  resize(){
    this.lineCharts.resize()
  }
},
create(){
// 拿不到dom

},

  mounted(){

this.getdatata()

 },
beforeDesstroy(){
  // 解绑挂在window上的事件(性能优化)
  window.removeEventListener('resize',this.resize)
}
}
</script>

<style lang="less" scoped>
.home{
 
  height: 100%;
background-color: #eee;
}
#homeChart{
  margin-top: 20px;
}
.homedata{
  display:flex;
  justify-content: center;
}
</style>